import type { ThemeToken } from "@yamada-ui/react"
import type { CSSProperties, StyledProperties } from "."

type Tokens = { [key in ThemeToken]?: (CSSProperties | StyledProperties)[] }

export const tokens: Tokens = {
  animations: ["animation"],
  aspectRatios: ["aspectRatio"],
  blurs: ["blur", "backdropBlur"],
  borders: [
    "border",
    "borderTop",
    "borderLeft",
    "borderBottom",
    "borderRight",
    "borderY",
    "borderX",
    "borderInline",
    "borderInlineStart",
    "borderInlineEnd",
    "borderBlock",
    "borderBlockStart",
    "borderBlockEnd",
    "borderImage",
  ],
  colors: [
    "color",
    "fill",
    "floodColor",
    "lightingColor",
    "stroke",
    "background",
    "backgroundColor",
    "caretColor",
    "accentColor",
    "textDecorationColor",
    "textEmphasisColor",
    "outlineColor",
    "scrollbarColor",
    "borderColor",
    "borderTopColor",
    "borderLeftColor",
    "borderBottomColor",
    "borderRightColor",
    "borderInlineColor",
    "borderInlineStartColor",
    "borderInlineEndColor",
    "borderBlockColor",
    "borderBlockStartColor",
    "borderBlockEndColor",
    "columnRuleColor",
    "focusRingColor",
  ],
  durations: ["animationDuration", "transitionDuration"],
  easings: ["transitionTimingFunction", "animationTimingFunction"],
  fonts: ["fontFamily"],
  fontSizes: ["fontSize"],
  fontWeights: ["fontWeight"],
  gradients: [
    "backgroundImage",
    "borderImageSource",
    "listStyleImage",
    "maskImage",
  ],
  keyframes: ["animationName", "_keyframes"],
  letterSpacings: ["letterSpacing"],
  lineHeights: ["lineHeight"],
  radii: [
    "borderRadius",
    "borderTopRightRadius",
    "borderTopLeftRadius",
    "borderBottomLeftRadius",
    "borderBottomRightRadius",
    "borderTopRadius",
    "borderBottomRadius",
    "borderRightRadius",
    "borderLeftRadius",
    "borderStartStartRadius",
    "borderStartEndRadius",
    "borderEndStartRadius",
    "borderEndEndRadius",
    "borderInlineStartRadius",
    "borderInlineEndRadius",
  ],
  shadows: ["boxShadow", "textShadow", "dropShadow", "backdropDropShadow"],
  sizes: [
    "width",
    "inlineSize",
    "height",
    "backfaceVisibility",
    "blockSize",
    "minWidth",
    "minInlineSize",
    "minHeight",
    "minBlockSize",
    "maxWidth",
    "maxInlineSize",
    "maxHeight",
    "maxBlockSize",
    "boxSize",
    "minBoxSize",
    "maxBoxSize",
    "flexBasis",
    "columnWidth",
    "containIntrinsicWidth",
    "gridTemplateColumns",
    "gridTemplateRows",
    "gridAutoColumns",
    "gridAutoRows",
  ],
  spaces: [
    "margin",
    "marginTop",
    "marginBlockStart",
    "marginRight",
    "marginInlineEnd",
    "marginBottom",
    "marginBlockEnd",
    "marginLeft",
    "marginInlineStart",
    "marginInline",
    "marginBlock",
    "padding",
    "paddingTop",
    "paddingBlockStart",
    "paddingRight",
    "paddingBottom",
    "paddingBlockEnd",
    "paddingLeft",
    "paddingInlineStart",
    "paddingInlineEnd",
    "paddingInline",
    "paddingBlock",
    "marginY",
    "marginX",
    "paddingY",
    "paddingX",
    "gap",
    "rowGap",
    "columnGap",
    "scrollMargin",
    "scrollMarginTop",
    "scrollMarginBottom",
    "scrollMarginLeft",
    "scrollMarginRight",
    "scrollMarginX",
    "scrollMarginY",
    "scrollPadding",
    "scrollPaddingTop",
    "scrollPaddingBottom",
    "scrollPaddingLeft",
    "scrollPaddingRight",
    "scrollPaddingX",
    "scrollPaddingY",
    "inset",
    "insetX",
    "insetInline",
    "insetY",
    "insetBlock",
    "top",
    "insetBlockStart",
    "bottom",
    "insetBlockEnd",
    "left",
    "insetInlineStart",
    "right",
    "insetInlineEnd",
    "translateX",
    "translateY",
    "focusRingOffset",
  ],
  zIndices: ["zIndex"],
}

export const tokenMap = Object.entries(tokens).reduce<{
  [key in CSSProperties | StyledProperties]?: ThemeToken
}>((prev, [key, list]) => {
  list.forEach((item) => {
    prev[item] = key as ThemeToken
  })

  return prev
}, {})

export const tokenPropertyMap: { [key: string]: ThemeToken[] } = {
  size: ["sizes"],
  animation: ["animations"],
  aspectRatio: ["aspectRatios"],
  blur: ["blurs"],
  border: ["borders"],
  color: ["colors"],
  duration: ["durations"],
  easing: ["easings"],
  font: ["fonts", "fontSizes", "fontWeights", "lineHeights", "letterSpacings"],
  gradient: ["gradients"],
  keyframe: ["keyframes"],
  radius: ["radii"],
  shadow: ["shadows"],
  space: ["spaces"],
  zIndex: ["zIndices"],
}
